<template>
	<view>
		<view class="scanView">
			<u-input border v-model="barcode" :focus="canFocus" :inputBorder="false" placeholder="请扫描条码" @focus="barcode = ''"
				@confirm="confirmOne" />
		</view>
		<!-- 已添加BOM -->
		<view class="info-views" style="padding: 10rpx" v-if="projectInfo.length > 0">
			<view class="line-view project-line-view" v-for="(item, index) of projectInfo"
				:class="{ printCheck: item.printCheck }" :key="index">
				<view class="project-views" style="font-size: 38rpx">
					<text style="font-weight: 700">{{ item.name }}</text>
					<view class="titel-btn-view" @click.stop="delInfo(index)">
						<uni-icons type="trash" size="28"></uni-icons>
					</view>
				</view>

				<view class="project-views" style="margin: 20rpx 0">
					<view class="title-view">物料代码</view>
					{{ item.code }}
				</view>

				<view class="project-views" style="align-items: flex-start; margin-bottom: 20rpx">
					<view class="title-view">规格型号</view>
					{{ item.productModel }}
				</view>

				<view class="project-views" v-if="!item.type">
					<view class="title-view">批号</view>
					<uni-easyinput v-model="item.batch" border placeholder="请输入批号" />
				</view>
				
				<view class="project-views" v-else>
					<view class="title-view">批号</view>
					{{ item.barcode }}
				</view>

				<view class="project-uni-datetime-picker"  v-if="!item.type">
					<view class="title-view">入库日期</view>
					<uni-datetime-picker style="display: inline !important" type="date" :clear-icon="false"
						v-model="item.receiptDate" />
				</view>

				<view class="project-views">
					<view style="width: 48%; align-items: center">
						<view class="title-view">数量</view>
						<view class="title-val">
							<uni-easyinput v-model="item.availableQuality" border placeholder="请输入数量" type="number" />
						</view>
					</view>

					<view style="margin-left: auto">
						<view class="title-view">单位</view>
						<view class="title-val">
							{{ item.type ?  item.productUnitName : item.unitName }}
						</view>
					</view>
				</view>

				<view class="project-views" v-if="item.auxUnitId">
					<view style="width: 48%; align-items: center">
						<view class="title-view">辅助数量</view>
						<view class="title-val">
							<uni-easyinput v-model="item.auxAvailableQuality" border placeholder="辅助数量" type="number" />
						</view>
					</view>

					<view style="margin-left: auto" v-if="item.auxUnitId">
						<view class="title-view">辅助单位</view>
						<view class="title-val">
							{{ item.auxUnitName || '--' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="noData" v-else>
			暂无数据，请添加
		</view>

		<view class="btn-style">
			<view class="submit-button" v-if="projectInfo.length > 0" @click="$u.throttle(submit, 1000)">
				提 交
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<searchProduct ref="searchProduct" :popShow="showPop" :projectInfo="projectInfo" :factoryId="factoryId"
			@popChange="changePopStatus"></searchProduct>
	</view>
</template>

<script>
	var that;
	import searchProduct from '@/components/searchProduct.vue';
	export default {
		components: {
			searchProduct,
		},
		data() {
			return {
				canFocus: false,
				barcode: null,
				printCheck: 0,
				showPop: false,
				tableData: [],
				scrollTop: null,
				type: null,
				search: {
					code: null,
					name: null,
					total: 0,
					page: 1,
					size: 20,
					productModel: null,
				},
				projectInfo: [], //添加的数组
				inventoryPlanId: null,
				factoryId: null,
				stockPositionId: null,
			};
		},
		onLoad(e) {
			that = this;
			that.inventoryPlanId = e.inventoryPlanId;
			that.stockPositionId = e.stockPositionId;
			that.factoryId = e.factoryId;
			if (e.type) {
				that.type = e.type;
			}
		},
		onBackPress() {
			if (that.showPop) {
				that.showPop = false;
				return true;
			} else {
				return false;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onNavigationBarButtonTap() {
			// that.showPop = false
			that.$refs.searchProduct.clearnSearch();
			that.showPop = true;
		},
		methods: {
			confirmOne(e) {
				if (e) {
					that.$u
						.post('/wms/mobile/api/getInventories', {
							barcode: e,
							factoryId: that.factoryId
						})
						.then((res) => {
							var list = res.data[0];
							list.check = 1;
							var now = new Date();
							var year = now.getFullYear();
							var month = now.getMonth() + 1;
							var date = now.getDate();
							var receiptDate = year + '-' + month + '-' + date;
							list.receiptDate = receiptDate;
							// list.productId = list.id;
							list.name = list.productName;
							list.availableQuality = null;
							list.auxAvailableQuality = null;
							list.code = list.productCode;
							list.type = 1 ;//1 是扫码 没有就是添加的
							console.log(list,'list wait add');
							that.projectInfo.push(list);
							that.setFocus();
						});
				}
			},
			setFocus() {
				that.canFocus = false;
				setTimeout(function() {
					that.$nextTick(function() {
						that.canFocus = true;
					});
				}, 100);
			},
			changePopStatus(e) {
				that.showPop = e;
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '是否确认提交？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '请稍后...',
							});
							const param = [];
							for (const item of that.projectInfo) {
								if (
									item.availableQuality == undefined ||
									!item.availableQuality ||
									item.availableQuality == 0
								) {
									that.$u.toast('请输入数量');
									return false;
								}

								param.push(item);
							}
							var url = '/wms/mobile/api/inventoryPlanSaveNewProduct';
							if (that.type) {
								url = '/wms/mobile/api/inventoryPlanReviewSaveNewProduct';
							}
							that.$u
								.post(url, {
									productList: param,
									factoryId: that.factoryId,
									inventoryPlanId: that.inventoryPlanId,
									stockPositionId: that.stockPositionId,
								})
								.then((res) => {
									console.log(res);
									if (res.code != 0) {
										uni.hideLoading();
										this.$u.toast(res.message);
										return false;
									}
									uni.hideLoading();
									uni.showToast({
										mask: true,
										icon: 'none',
										title: '提交成功',
									});
									setTimeout(function() {
										uni.navigateBack();
									}, 1000);
								})
								.catch((err) => {
									uni.hideLoading();
								});
						}
					},
				});
			},
			delInfo(e) {
				const list = this.$u.deepClone(this.projectInfo);
				const id = list[e].id;
				list.splice(e, 1);
				this.projectInfo = this.$u.deepClone(list);
				// const tableData = this.$u.deepClone(this.tableData);
				// for (const item of tableData) {
				// 	if (item.id == id) {
				// 		item.check = 0;
				// 	}
				// }
				// that.tableData = this.$u.deepClone(tableData);
			},
		},
	};
</script>

<style lang="scss">
	.noData {
		width: 750rpx;
		padding-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #a3a3a3;
	}

	page {
		background-color: #f8f8f8;
		padding-bottom: 150rpx;
	}

	.content {
		height: 100%;
	}

	.pop-view {
		height: 100vh;
		width: 750rpx;
		padding: 45rpx 10rpx 5rpx 10rpx;
		// display: flex;
		font-size: 35rpx;
		flex-direction: column;
		box-sizing: border-box;

		.pop-search {
			padding: 15rpx;
		}

		.pop-info {
			flex: 1;
			overflow: hidden;
			padding: 0 15rpx 15rpx 15rpx;
			background-color: #f8f8f8;

			.pop-card {
				padding: 25rpx;
				background-color: #fff;
				margin: 15rpx 0;
				border-radius: 15rpx;
				font-size: 30rpx;
				border: 1rpx solid #fff;

				view {
					margin: 2rpx 0;
				}

				.popCard-name {
					color: #000;
					font-size: 35rpx;
					margin-bottom: 10rpx;
					display: flex;

					.pop-title {
						width: 700rpx;
					}
				}

				.popCard-line {
					display: flex;
					align-items: center;

					.popCard-li-label {
						width: 160rpx;
						color: #999;
					}

					.popCard-half {
						display: flex;
					}

					.popCard-li-value {
						width: 500rpx;
						color: #555;
					}

					.popCard-li-valueLittle {
						width: 210rpx;
						color: #555;
					}
				}
			}

			.isCheck {
				border: 1rpx solid #9ca6ff;
			}
		}

		.pop-bottom {
			height: 80rpx;
			padding: 10rpx 25rpx 0 25rpx;
		}
	}

	.info-views {
		background-color: #fff;
		padding: 15rpx 20rpx;
		padding-bottom: 10rpx;
		margin-bottom: 25rpx;
	}

	.mini-text {
		font-size: 30rpx;
	}

	.sub-text {
		margin-left: 10rpx;
		color: #3067e8;
		text-decoration: underline;
	}

	.project-views {
		width: 720rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		view {
			display: flex;
		}
	}

	.project-uni-datetime-picker {
		width: 720rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.project-line-view {
		flex-direction: column;
		margin-top: 25rpx;
		border-radius: 20rpx;
		border: 1rpx solid #fff;
	}

	// .project-line-view:last-of-type {
	// 	border: none;
	// }

	.printCheck {
		border: 1rpx solid #3067e8;
	}

	.title-view {
		width: 150rpx;
		color: #909399;
	}

	.title-val {
		width: 170rpx;
		color: #303133;
	}

	.btn-style {
		display: flex;
		justify-content: center;
	}

	.submit-button {
		background-color: #3067e8;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		width: 700rpx;
		border-radius: 15rpx;
		height: 80rpx;
		font-size: 36rpx;
	}

	.over {
		background-color: #f8f8f8;
		color: #3067e8;
		border: 1rpx solid #3067e8;
	}

	.pop-button {
		width: 290rpx;
		background-color: #3067e8;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10rpx auto;
		border-radius: 15rpx;
		height: 75rpx;
		font-size: 35rpx;
	}

	.line-view {
		width: 100%;
		display: flex;
		align-items: flex-start;
		padding: 15rpx 0;

		.line-halfway {
			width: 345rpx;
		}

		.line-search {
			display: flex;
			align-items: center;
			padding-left: 25rpx;
			color: #a7a7a7;
			font-size: 32rpx;
		}

		.line-text {
			width: 150rpx;
			font-weight: 700;
			color: #555;
		}

		.line-value {
			width: 550rpx;
			display: flex;
			color: #6a6a6a;
		}
	}

	.btn-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background-color: #fff;
		z-index: 9;
		display: flex;

		.submit-button {
			width: 325rpx;
			margin: 15rpx auto 25rpx auto;
		}

		.reset {
			color: #3067e8;
			background-color: #fff;
			border: 1rpx solid #3067e8;
		}
	}

	.titel-btn-view {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.scanView {
		background-color: #fff;
		padding: 25rpx;
	}
</style>